<template>
  <view class="custom-title-container">
    <view class="flex items-center justify-left">
      <view class="green-block"></view>
      <view class="title-content">
        <text class="title-text">{{ title }}</text>
        <view v-if="showMore" class="more-button">更多></view>
      </view>
    </view>
    <view class="green-line"></view>
  </view>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    required: true
  },
  showMore: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
.custom-title-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.green-block {
  width: 2rpx;
  height: 40rpx;
  background-color: $thme-color;
}

.title-content {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-left: 20rpx; /* 20rpx间距 + 20rpx色块宽度 */
  position: relative;
  min-height: 60rpx;
}

.title-text {
  font-size: 32rpx;
  color: #333333;
}

.more-button {
  background: transparent;
  border: none;
  color: $thme-color;
  font-size: 28rpx;
  padding: 0;
  margin: 0;
  border: none;
}

.green-line {
  width: 100%;
  height: 2rpx;
  background-color: $thme-color;
  margin-top: 10rpx;
}
</style>
